<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <style>
        html body{
            width: 100%;
            height: 100%;
            margin: 0px;
            text-align: center;
        }
        .topDiv{
            height: 50px;
            background-color: lightgray;
            text-align: left;
        }
        .topDiv #usernameP{
            display: inline-block;
            margin: 12px 50px 0px 50px;
            padding: 0px;
            font-weight: bold;
            color: darkblue;
        }
        .topDiv a{
            text-decoration: none;
            color: darkblue;
            margin-right: 30px;
        }
        .articleTopicDiv{
            padding-top: 50px;
        }
        .articleTopicDiv ul{
            list-style: none;
            padding: 0px;
            margin: 0px;
        }
        .articleTopicDiv ul li{
            margin: 0px 0px 30px 0px;
            font-size: 20px;
            color: darkblue;
            cursor: pointer;
        }
        .articleTopicDiv .more{
            margin: 0px 0px 0px 0px;
            padding: 0px;
            color: darkblue;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="topDiv">
        <p id="usernameP">none</p>
        <a href="index.html" onclick="logout()">注销</a>
        <a href="write.html" >创作文章</a>
    </div>
    <div class="articleTopicDiv">
        <ul id="articleTopicUl">
        </ul>
        <p class="more" onclick="onMoreClick()">更多...</p>
    </div>

     <!-- 导入jquery -->
     <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.0.js"></script>
     <script type="text/javascript">
        var currentPageIndex = 1;
        var pageSize = 20;
        function logout(){
            window.sessionStorage.removeItem('user');
        }
        function articleTopics(pageSize,pageIndex){
            var requestData = new Object();
            requestData.pageSize = pageSize;
            requestData.pageIndex = pageIndex;
            
            var url = "http://127.0.0.1:80";
            url += "/list";
            $.post(url,JSON.stringify(requestData),function(response){
                var result = JSON.parse(response);
                if(result.result == "success"){
                    // var topics = [{id:1,text:'aaa'}]; // 示例
                    var topics = result.topics;
                    for(var i=0;i<topics.length;i++){
                        var item = '<li onclick=\'onArticleTopicClick(' + topics[i].id + ')\'>';
                        item += topics[i].topic;
                        item += '<p style=\'display:inline-block;margin: 0px 0px 0px 20px;font-size:10px;color:gray;\'> ';
                        item += '作者：';
                        item += topics[i].user;
                        item += ' 日期：';
                        item += topics[i].updateTime;
                        item += '</p>';
                        item += '</li>';
                        $("#articleTopicUl").append(item);
                    }
                    currentPageIndex++;
                    return;
                }

                alert("没有更多文章！");
            });
        }
        function onArticleTopicClick(articleId){
            window.location.href = 'article.html?id=' + articleId;
        }
        function onMoreClick(){
            articleTopics(pageSize,currentPageIndex);
        }
        $(document).ready(function () {
            /* 登录检测 */
            var user = window.sessionStorage.getItem('user');
            if(user == null || typeof(user) == "undefined"){
                /* 未登录 */
                alert("请您先登录！");
                window.location.href = "index.html";
                return;
            }

            $('#usernameP').html(user);
            /* 加载文章标题：20条 */
            articleTopics(pageSize,currentPageIndex);
        });
     </script>
</body>
</html>